<template>
  <div class="try-out-box">
    <div class="main-container">
      <div class="box-body">
        <h1 class="scrollRevealLeft0">马上获取一对一专属服务</h1>
        <div class="scrollRevealRight0 input-box">
          <input v-model="veniceMsg" placeholder="输入您的手机号" type="text" />
          <div @click="venice">立即咨询</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/assets/js/config";

export default {
  data() {
    return {
      veniceMsg: ""
    };
  },
  mounted(){
  },
  methods: {
    venice() {
      if (!/^1[3456789]\d{9}$/.test(this.veniceMsg)) {
        this.$message.warning({
          message: "手机号码有误，请重填",
          offset: 100
        });
        return false;
      }
      const loading = this.$loading();

      $.ajax({
        url: config.pass_api_root + "/ajax",
        data: {
          ugi: "intention",
          action: "submit",
          moduleid: "2fc3a9c392a94cfcb0f5146cfe624eb3",
          bundleid: "mpwork.crm",
          telnum: this.veniceMsg
        },
        // type: "GET",
        dataType: "jsonp",
        success: res => {
          loading.close();
          if (res.code == "A00006") {
            this.$message.warning({
              message:
                "您的信息已提交给相关客服人员，请耐心等待相关客服人员联系",
              offset: 100
            });
            this.veniceMsg = "";
          }
        },
        error: () => {
          loading.close();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.try-out-box {
  text-align: center;
  overflow: hidden;

  .input-box {
    display: flex;
    border: 1px solid #fe8406;
    width: 340px;
    margin: auto;
    input {
      flex: 1;
      width: 100px;
      padding: 0 10px;
      font-size: 16px;
    }
    > div {
      background: #fe8406;
      padding: 12px;
      cursor: pointer;
      white-space: nowrap;
      font-size: 14px;
      color: #fff;
    }
  }
  .box-body {
    padding: 26px 0;

    h1 {
      font-size: 20px;
      color: #272727;
      margin-bottom: 20px;
    }
  }
}
</style>